<template>
  <div class="app">
    <div class="cont1200 topbar">
      <span>
        <a href>杭州</a>
        <a href>全国405城市已覆盖，13000家门店包安装</a>
      </span>
      <ul class="Bar-text f-r">
        <!-- <li>企业客户 |</li>
        <li>店铺加盟 |</li>
        <li>工场店加盟 |</li>-->
        <li>
            <el-dropdown-item class="clearfix" style="background-color:#6660">
              <router-link :to="{name:'ShoppingCart'}">商城首页</router-link>
            </el-dropdown-item>
          </li>
          <li>
            <el-dropdown-item class="clearfix" style="background-color:#6660">
              <router-link :to="{name:'ShoppingCart'}">我的商城</router-link>
            </el-dropdown-item>
          </li>
          <li>
            <el-dropdown-item class="clearfix" style="background-color:#6660">
              <router-link :to="{name:'ShoppingCart'}">直营网点中心</router-link>
            </el-dropdown-item>
          </li>
          <li>
            <el-dropdown-item class="clearfix" style="background-color:#6660">
              <router-link :to="{name:'ShoppingCart'}">关注商城</router-link>
            </el-dropdown-item>
          </li>
          <li>
            <el-dropdown-item class="clearfix" style="background-color:#6660">
              <router-link :to="{name:'ShoppingCart'}">手机版</router-link>
            </el-dropdown-item>
          </li>
        <li v-if="userDatas.token==''">
          <router-link :to="{name:'login'}">请登录</router-link>
        </li>
        <template v-else>
          <li>
            <el-dropdown-item class="clearfix" style="background-color:#6660">
              <router-link :to="{name:'ShoppingCart'}">购物车</router-link>
              <el-badge
                class="mark"
                v-if="this.$store.state.commonDATA.ShoppingCart.num>0"
                :value="this.$store.state.commonDATA.ShoppingCart.num"
              />
            </el-dropdown-item>
          </li>
          <li>
            <Dropdown :dataList="userDatas.dataList"></Dropdown>
          </li>
          <li>
            <a href @click.prevent="logout">注销</a>
          </li>
        </template>
      </ul>
    </div>

    <!-- <template v-if="this.$store.state.isLogin">
      <h4>您好:{{ this.$store.state.name }}</h4>
      <span>个人中心</span>
      <span>购物车</span>
      <el-button plain @click="logout">退出</el-button>
    </template>
    <template v-if="!this.$store.state.isLogin">
      <h4>您好请登录</h4>
      <el-button plain @click="loging">登录</el-button>
    </template>-->
  </div>
</template>
<script  type="text/ecmascript-6">
import Dropdown from "../../components/Dropdown/dropdown";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  // computed: mapState({
  //   count: state => state.userDATA // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁
  // }),

  computed: {
    ...mapState({
      userDatas(state) {
        return state.userDATA;
      }
    })
  },
  created: function() {
    // this.$store.commit("UserUpdata", {
    //   name: sessionStorage.getItem("name"),
    //   token: sessionStorage.getItem("token")
    // });
  },

  methods: {
    logout() {
      this.$store.commit("UserLogout");
      this.$router.push({ name: "index" });
      location.reload();
    // reload()方法用于刷新当前文档。
    // reload() 方法类似于你浏览器上的刷新页面按钮。
    // 如果把该方法的参数设置为 true，那么无论文档的最
    // 后修改日期是什么，它都会绕过缓存，从服务器上重新下
    // 载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift
    //  健的效果是完全一样。
    },
    loging() {
      this.$router.push({ name: "login" });
    }
  },

  components: {
    Dropdown
  }
};
</script>
<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";

.app {
  height: 30px;
  line-height: 36px;
  font-size: 13px;
  font-weight: 600;
  background-color: #eeeeee7d;

  cursor: pointer;
  .topbar {
    a,
    li {
      color: $alink;
    }
    a:hover {
      color: $main-color12;
    }
  }

  .Bar-text li {
    float: left;
    margin-left: 10px;
  }
}
</style>
